<template>
  <div
    class="stepOut"
    :class="$store.getters.windowWidth <= 1024 ? 'stepOutSmall' : ''"
  >
    <ul style="list-style-type:none;">
      <li
        class="stepItem"
        v-for="(stepItem, index) in stepInfo.list"
        :key="index"
        :class="[
          $store.getters.windowWidth <= 1024
            ?  Math.floor(index / 5) % 2 == 0
              ? 'stepItemLeftStart'
              : 'stepItemBrother'
            :  Math.floor(index / 5) % 2 == 0
            ? 'stepItemLeftStart'
            : 'stepItemBrother',
          stepInfo.step == index ? 'stepItemProgress' : ''
        ]"
      >
        <!-- 模拟步骤条的节点，此处为数值，如果是完成的步骤则为对勾 Object.prototype.toString.call-->
        <div :class="stepInfo.step >= index + 1 ? 'icon active' : 'icon'">
          {{ stepInfo.step >= index + 1 ? '' : index + 1 }}
        </div>
        <!-- 模拟步骤条连接线，动态显示 一行最多展示6个，如果超过六个，连线则为圆弧状，如果是1024尺寸，则一行最多展示为3个
        如果此步骤能不能整除6/3或者此步骤index+1除以6/3的余数可以整除2的话，显示之前（前提：当从左往右的时，判断当前步骤的索引是否大于步骤的长度来决定显示，当为从右往左时，则判断当前索引是否大于步骤的长度来决定显示） -->
        <div
          v-if="
            $store.getters.windowWidth <= 1024
              ? (index + 1) % 5 != 0 || ((index + 1) / 5) % 2 == 0
              : (index + 1) % 5 != 0 || ((index + 1) / 5) % 2 == 0
          "
          :class="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 5) % 2 == 0
                ? stepInfo.step >= index + 2
                  ? 'line lineActive'
                  : 'line'
                : stepInfo.step >= index + 1
                ? 'line lineActive'
                : 'line'
              : Math.floor(index / 5) % 2 == 0
              ? stepInfo.step >= index + 2
                ? 'line lineActive'
                : 'line'
              : stepInfo.step >= index + 1
              ? 'line lineActive'
              : 'line'
          "
          v-show="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 5) % 2 == 0
                ? index + 1 !== stepInfo.list.length
                : index !== stepInfo.list.length
              : Math.floor(index / 5) % 2 == 0
              ? index + 1 !== stepInfo.list.length
              : index !== stepInfo.list.length
          "
        ></div>
        <!-- 圆弧线
        如果可以整除6/3则为当前行的最后一个，显示为弧线 -->
        <div
          v-if="
            $store.getters.windowWidth <= 1024
              ? index != 0 && (index + 1) % 5 == 0
              : index != 0 && (index + 1) % 5 == 0
          "
          :class="[
            stepInfo.step >= index + 2
              ? 'lineCircle lineCircleActive'
              : 'lineCircle',
            $store.getters.windowWidth <= 1024
              ? ((index + 1) / 5) % 2 == 0
                ? 'lineCircleLeft'
                : ''
              : ((index + 1) / 5) % 2 == 0
              ? 'lineCircleLeft'
              : ''
          ]"
          v-show="index + 1 !== stepInfo.list.length"
        ></div>

        <!-- 步骤名称  -->
        <p class="stepStatus">{{ stepItem.title }}</p>
        <!-- 步骤描述  -->
        <p class="statusTime">{{ stepItem.description }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'steps',
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.stepOut {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  margin-left: 50px;
  margin-top: -30px;

  .stepItem {
    width: 280px;
    height: 100px;
    float: left;
    font-family: 'PingFangSC-Regular';
    font-size: 10px;
    text-align: center;
    position: relative;
    .lineCircle {
      left: 58%;
      top: 12px;
      position: absolute;
      display: block;
      border-left-color: white;
      border-left-width: 0px;
      width: 51%;
      border-color: white white white white;
      border-left-style: hidden;
      border-left: none;
      border-top: 2px solid #c0c4cc;
      border-right: 2px solid #c0c4cc;
      border-bottom: 2px solid #c0c4cc;
      border-bottom: 2px solid #c0c4cc;
      border-left: 0px solid #c0c4cc;
      height: 102%;
      border-radius: 0px 25px 25px 0px;
    }
    &:nth-child(n + 5) {
      float: right !important;
      right: 12%;
    }
    &.stepItemLeftStart {
      float: left !important;
      right: 0;
      + .stepItemBrother {
        .line {
          display: none;
        }
        left: -195px;
      }
    }
    &.stepItemProgress {
      .icon {
        border: 2px solid rgb(48, 49, 51);
        color: rgb(48, 49, 51);
      }
      .stepStatus {
        color: #333;
      }
      .statusTime {
        color: #333;
        opacity: 0.8;
      }
      //margin-right: 200px;
    }
    .lineCircleActive {
      border-bottom: 2px solid #007cdb;
      border-top: 2px solid #007cdb;
      border-right: 2px solid #007cdb;
      border-left: 0px solid #007cdb;
    }
    .lineCircleLeft {
      left: 0%;
      width: 41%;
      border-top: 2px solid #c0c4cc;
      border-right: 0 solid #c0c4cc;
      border-bottom: 2px solid #c0c4cc;
      border-bottom: 2px solid #c0c4cc;
      border-left: 2px solid #c0c4cc;
      border-radius: 25px 0px 0px 25px;
      &.lineCircleActive {
        border-bottom: 2px solid #007cdb;
        border-top: 2px solid #007cdb;
        border-right: 0 solid #007cdb;
        border-left: 2px solid #007cdb;
      }
    }

    .icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #c0c4cc;
      margin: 0 auto;
      position: relative;
      z-index: 888;
      color: rgb(192, 196, 204);
    }
    .active {
      border: 2px solid #007cdb;
      color: #007cdb;
      &::after {
        content: '';
        background: url('~@/assets/images/rightCheck.png');
        width: 24px;
        height: 24px;
        background-size: contain;
        position: absolute;
        left: -2px;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
    .line {
      position: absolute;
      top: 12px;
      left: 58.5%;
      border-bottom: 2px solid #c0c4cc;
      width: 230px;
      z-index: 111;
    }
    .lineActive {
      border-bottom: 2px solid #007cdb;
    }
    .stepStatus {
      color: rgba(87, 87, 87, 1);
      line-height: 12px;
      margin-top: 5px;
    }
    .statusTime {
      color: rgba(87, 87, 87, 1);
      opacity: 0.5;
      margin-top: -5px;
    }
  }
}
</style>
